<template>
  <el-card class="medicine-container">
    <template #header>
      <div class="header" style="display: flex;flex-direction: row">
        <!-- 添加查询表单       -->
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
          <el-form-item label="药品名">
            <el-input v-model="queryForm.medicineName" placeholder="药品名"/>
          </el-form-item>
          <el-form-item label="主治功能">
            <el-input v-model="queryForm.func" placeholder="主治功能"/>
          </el-form-item>
          <el-form-item label="供应商">
            <el-select style="width: 120px" v-model="queryForm.supplierId" placeholder="供应商">
              <el-option
                  v-for="item in supplierList"
                  :key="item.supplierId"
                  :label="item.supplierName"
                  :value="item.supplierId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="getMedicines">查询</el-button>
        <el-button type="primary" @click="handleAdd">添加药品</el-button>
      </div>
    </template>
    <el-table
        :data="state.tableData"
        style="width: 100%"
        v-loading="state.loading"
    >
      <el-table-column label="药品名" prop="medicineName" width="150"/>
      <el-table-column label="简述" prop="description" width="150"/>
      <el-table-column label="供应商" prop="supplierId" width="100">
        <template #default="scope">
          {{ scope.row.supplier.supplierName }}
        </template>
      </el-table-column>
      <el-table-column label="药店名" width="100">
        <template #default="scope">
          {{ scope.row.shop.shopName }}
        </template>
      </el-table-column>
      <el-table-column label="主治功能" prop="func" width="150"/>
      <el-table-column label="价格" prop="price" width="100"/>
      <el-table-column label="积分数" prop="point" width="100"/>
      <el-table-column label="库存数" prop="stockQuantity" width="100"/>
      <el-table-column label="生产日期" prop="manufactureDate" width="150">
        <template #default="scope">
          {{ formatDate(scope.row.manufactureDate) }}
        </template>
      </el-table-column>
      <el-table-column label="过期时间" prop="expiryDate" width="150">
        <template #default="scope">
          {{ formatDate(scope.row.expiryDate) }}
        </template>
      </el-table-column>
      <el-table-column label="类别ID" prop="categoryId" width="100"/>
      <el-table-column label="图片" width="100">
        <template #default="scope">
          <el-image
              :src="scope.row.medicineImg"
              style="width: 50px; height: 50px"
              fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="药品状态" width="100">
        <template #default="scope">
          <el-tag
              :type="scope.row.medicineStatus === 0 ? 'success' : scope.row.medicineStatus === 1 ? 'warning' : 'danger'">
            {{ scope.row.medicineStatus === 0 ? '正常' : scope.row.medicineStatus === 1 ? '稀缺' : '售罄' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" fixed="right">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteOne(scope.$index, scope.row)">删除</el-button>
          <el-button type="info" @click="showDetail(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="state.total"
        :page-size="state.pageSize"
        :current-page="state.currentPage"
        @current-change="changePage"
    />
  </el-card>
  <DialogAddMedicine ref="addMedicine" :type="state.type" :reload="getMedicines"/>
  <el-dialog v-model="state.detailVisible" title="药品详细信息" width="800px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="药品名称">{{ state.detailData.medicineName }}</el-descriptions-item>
      <el-descriptions-item label="药品描述">{{ state.detailData.description }}</el-descriptions-item>
      <el-descriptions-item label="主治功能">{{ state.detailData.func }}</el-descriptions-item>
      <el-descriptions-item label="用法用量">{{ state.detailData.useInstruction }}</el-descriptions-item>
      <el-descriptions-item label="不良反应">{{ state.detailData.adverseReactions }}</el-descriptions-item>
      <el-descriptions-item label="禁忌">{{ state.detailData.taboo }}</el-descriptions-item>
      <el-descriptions-item label="药物相互作用">{{ state.detailData.interact }}</el-descriptions-item>
      <el-descriptions-item label="存储方式">{{ state.detailData.storage }}</el-descriptions-item>
      <el-descriptions-item label="成分">{{ state.detailData.component }}</el-descriptions-item>
      <el-descriptions-item label="价格">{{ state.detailData.price }}</el-descriptions-item>
      <el-descriptions-item label="积分数">{{ state.detailData.point }}</el-descriptions-item>
      <el-descriptions-item label="库存">{{ state.detailData.stockQuantity }}</el-descriptions-item>
      <el-descriptions-item label="生产日期">{{ formatDate(state.detailData.manufactureDate) }}</el-descriptions-item>
      <el-descriptions-item label="过期时间">{{ formatDate(state.detailData.expiryDate) }}</el-descriptions-item>
      <el-descriptions-item label="供应商">{{ state.detailData.supplierId }}</el-descriptions-item>
      <el-descriptions-item label="药店">{{ state.detailData.shopId }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, onMounted} from 'vue';
import {ElMessage} from 'element-plus';
import {medicineList, deleteMedicine, getMedicineDetail} from '@/api/drug';
import DialogAddMedicine from '@/components/shopComp/DialogAddMedicine.vue';
import {getAllSupplier} from "@/api/supplier";

const addMedicine = ref();
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  currentPage: 1,
  pageSize: 10,
  type: 'add', // 操作类型
  total: 0, // 总条数
  pages: 1,
  detailVisible: false,
  detailData: {}
});

const queryForm = ref({
  medicineName: '',
  func: '',
  supplierId: ''
});

const supplierList = ref([])
onMounted(() => {
  getMedicines();
  getAllSupplier().then((res) => {
    supplierList.value = res.data.data;
  })

});

// 获取药品列表
const getMedicines = async () => {
  state.loading = true;
  await medicineList({
    medicineName: queryForm.value.medicineName,
    supplierId: queryForm.value.supplierId,
    func: queryForm.value.func,
    pageNumber: state.currentPage,
    pageSize: state.pageSize,
  }).then((res) => {
    console.log('请求结果：', res)
    state.tableData = res.data.data.records;
    state.total = res.data.data.total;
    state.pages = res.data.data.pages;
    state.currentPage = res.data.data.current;
    state.loading = false;
  });
};

// 格式化日期
const formatDate = (date) => {
  if (!date) return '';
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

// 添加药品
const handleAdd = () => {
  state.type = 'add';
  addMedicine.value.open();
};

// 编辑药品
const handleEdit = (index, row) => {
  state.type = 'edit';
  addMedicine.value.open(row);
};

// 删除药品
const deleteOne = (index, row) => {
  deleteMedicine(row.medicineId).then(() => {
    ElMessage.success('删除成功');
    getMedicines();
  });
};

// 分页
const changePage = (val) => {
  state.currentPage = val;
  getMedicines();
};

// 显示药品详情
const showDetail = (index, row) => {
  state.detailVisible = true;
  getMedicineDetail(row.medicineId).then((res) => {
    state.detailData = res.data.data;
  });
};
</script>

<style scoped>
.medicine-container {
  margin: 20px;
}
</style>